<script  lang="ts" context="module">
	export const prerender = true;
</script>

<script>
	import { actixGraphqlEndpoint } from "$lib/js/stores";
	import Leftnav from "$lib/header/Leftnav.svelte";
	import Footer from "$lib/header/Footer.svelte";
	import "../app.postcss";
	import {
		QueryClient,
		QueryClientProvider,
	} from "@sveltestack/svelte-query";
	const queryClient = new QueryClient({
		defaultOptions: {
			queries: {
				refetchOnWindowFocus: true,
			},
		},
	});
	let endpoint;
	$: {
		endpoint = $actixGraphqlEndpoint;
		console.log("__layout.svelte endpoint=", endpoint);
	}
</script>

<svelte:head>
	<script src="https://unpkg.com/@popperjs/core@2"></script>
	<script src="https://unpkg.com/tippy.js@6"></script>
	<link
		rel="stylesheet"
		href="https://unpkg.com/tippy.js@6/themes/light.css"
	/>
	<link
		rel="stylesheet"
		href="https://unpkg.com/tippy.js@6/themes/light-border.css"
	/>
</svelte:head>

<QueryClientProvider client={queryClient}>
	<div class="relative w-full flex-row items-center justify-center h-screen">
		<div
			class="absolute inset-y-0 left-0 flex flex-col items-center 
			w-16 h-full text-gray-400 bg-gray-900 ">
			<Leftnav />
		</div>

		<div
			class="absolute inset-y-0 left-16 h-full right-0 
			justify-center overflow-y-auto overflow-x-hidden pb-8">
			<slot />
		</div>

		<div
			class="absolute inset-x-0 bottom-0 h-8 bg-rose-300
			justify-center overflow-y-auto overflow-x-hidden">

			<Footer />
		</div>
	</div>
</QueryClientProvider>
<!--
	Tailwind Starter Kit: A library of components made with Tailwind CSS to bootstrap your projects
	https://tailwind-starter-kit.vercel.app/docs/cards
-->
